<template>
	<view class="flex flex-column flex-1">
		<!-- <uni-nav-bar :fixed="true" left-icon="back" title="烟气自动监测设备日常巡检记录表" color="#156DAC" @clickLeft="pageback"></uni-nav-bar> -->
		<view class="form-title">
			<text>实际水样比对试验结果记录表</text>
		</view>
			<view class="user-form">
				<view class="user-form-item">
					<view class="form-label">运行方代表</view>
					<view class="form-input"><input class="form-input" v-model="form.key1"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">业主方代表</view>
					<view class="form-input"><input class="form-input" v-model="form.key2"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">日期</view>
					<view class="form-input">
						<TimeSelector
							class="form-ipt"
						    showType="dateToTime"
							@btnConfirm="(e)=>dateChange(e,'key3')" 
						>
						    <text v-if="form.key3">{{form.key3}}</text>
							<text v-else style="color: grey;">请选择日期</text>
						</TimeSelector>
					</view>
				</view>
				<view class="user-form-item">
					<uni-icons v-if="tableLength < tableLengthMax" type="plus-filled" size="18" class="add-row-btn" @click="handleAdd"></uni-icons>
					<uni-icons v-if="tableLength > tableLengthMin" type="minus-filled" size="18" class="sub-row-btn" @click="handleSub"></uni-icons>
				</view>
				<div class="user-form-item">
					<div class="loop-form-table">
						<div class="loop-form-table-row">
							<div class=" loop-form-table-item mini">序号</div>
							<div class="text-center loop-form-table-item">在线监测仪器测定结果</div>
							<div class="text-center loop-form-table-item">比对方法测定结果1</div>
							<div class="text-center loop-form-table-item">比对方法测定结果2</div>
							<div class="text-center loop-form-table-item">比对方法测定结果平均值</div>
							<div class="text-center loop-form-table-item">测定误差</div>
							<div class="text-center loop-form-table-item">是否合格</div>
						</div>
						<template v-for="(n,i) in tableLength">
							<div class="loop-form-table-row">
							  <div class="loop-form-table-item mini">{{i+1}}</div>
							  <div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(6*i)+1)]" /></div>
							  <div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(6*i)+2)]" /></div>
							  <div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(6*i)+3)] @blur="blur1(3+(6*i)+3)" /></div>
							  <div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(6*i)+4)]" /></div>
							  <div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(6*i)+5)]" /></div>
							  <div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(6*i)+6)]" /></div>
							</div>
						</template>
					</div>
				</div>
				<!-- 上传 -->
				<view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传图片</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUpload ref="imgUpload" :list="imgList" :disabled="isDetail"/>
						</view>
					</view>
				</view>
				<!-- <view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传视频</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUploadVideo />
						</view>
					</view>
				</view> -->
			</view>
	</view>
</template>
<script>
	var  graceChecker = require("../../../common/graceChecker.js");
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import TmUpload from '@/components/tm-upload/tm-upload.vue'
	import TmUploadVideo from '@/components/tm-upload-video/tm-upload-video.vue'
	import LbPicker from '@/components/lb-picker'
	
	import {getDict} from "@/common/dict.js"
	
	export default {
		components: {
			uniIcons,uniPopup,uniNavBar,TimeSelector,TmUpload,TmUploadVideo,LbPicker
		},
		props:{
			obj: {
				type: Object,
				default: ()=>{}
			},
			isDetail: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				tableLength: 6,
				tableLengthMin: 6,
				tableLengthMax: 29,
				typeList: [],
				tableValue: [],
				resultList:[
					{value:'是',label:'是'},
					{value:'否',label:'否'},
				],
				tableList:[
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''},
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''},
					{key1: '',key2:'是',key3: '',key4: '',key5: '',key6: ''}
				],
				unitList:[
					{id: 1,name: '单位一'},{id: 1,name: '单位二'},
				],
				form:{
					// key1: '', enterpriseName: '', outletName: '',
					// key4: null, key5: '', key6: '',
					// key7: '', key8: '是', key9: '',
					// key10: '是', key11: '', key12: '是', key13: '', key14: '是', key15: '', key16: '是', key17: '',
					// key18: '是', key19: '', key20: '是', key21: '', key22: '是', key23: '', key24: ''
					key0:'',key1:'',key2:'',key3:'',key4:'',key5:'',key6:'',key7:'',key8:'',key9:'',key10:'',key11:'',key12:'',key13:'',key14:'',key15:'',key16:'',key17:'',key18:'',key19:'',key20:'',key21:'',key22:'',key23:'',key24:'',key25:'',key26:'',key27:'',key28:'',key29:'',key30:'',key31:'',key32:'',key33:'',key34:'',key35:'',key36:'',key37:'',key38:'',key39:'',key40:'',key41:'',key42:'',key43:'',key44:'',key45:'',key46:'',key47:'',key48:'',key49:'',key50:'',key51:'',key52:'',key53:'',key54:'',key55:'',key56:'',key57:'',key58:'',key59:'',key60:'',key61:'',key62:'',key63:'',key64:'',key65:'',key66:'',key67:'',key68:'',key69:'',key70:'',key71:'',key72:'',key73:'',key74:'',key75:'',key76:'',key77:'',key78:'',key79:'',key80:'',key81:'',key82:'',key83:'',key84:'',key85:'',key86:'',key87:'',key88:'',key89:'',key90:'',key91:'',key92:'',key93:'',key94:'',key95:'',key96:'',key97:'',key98:'',key99:'',key100:'',key101:'',key102:'',key103:'',key104:'',key105:'',key106:'',key107:'',key108:'',key109:'',key110:'',key111:'',key112:'',key113:'',key114:'',key115:'',key116:'',key117:'',key118:'',key119:'',key120:'',key121:'',key122:'',key123:'',key124:'',key125:'',key126:'',key127:'',key128:'',key129:'',key130:'',key131:'',key132:'',key133:'',key134:'',key135:'',key136:'',key137:'',key138:'',key139:'',key140:'',key141:'',key142:'',key143:'',key144:'',key145:'',key146:'',key147:'',key148:'',key149:'',key150:'',key151:'',key152:'',key153:'',key154:'',key155:'',key156:'',key157:'',key158:'',key159:'',key160:'',key161:'',key162:'',key163:'',key164:'',key165:'',key166:'',key167:'',key168:'',key169:'',key170:'',key171:'',key172:'',key173:'',key174:'',key175:'',key176:'',key177:'',key178:'',key179:'',key180:'',key181:'',key182:'',key183:'',key184:'',key185:'',key186:'',key187:'',key188:'',key189:'',key190:'',key191:'',key192:'',key193:'',key194:'',key195:'',key196:'',key197:'',key198:'',key199:'',key200:'',key201:'',key202:'',key203:'',key204:'',key205:'',key206:'',key207:'',key208:'',key209:'',key210:'',key211:'',key212:'',key213:'',key214:'',key215:'',key216:'',key217:'',key218:'',key219:'',key220:'',key221:'',key222:'',key223:'',key224:'',key225:'',key226:'',key227:'',key228:'',key229:'',key230:'',key231:'',key232:'',key233:'',key234:'',key235:'',key236:'',key237:'',key238:'',key239:'',key240:'',key241:'',key242:'',key243:'',key244:'',key245:'',key246:'',key247:'',key248:'',key249:''
      
				},
				imgList: [],
			}
		},
		mounted() {
			// 初始化字典
			this.typeList = getDict('e015')
			// console.log(this.typeList)
			// console.log(this.obj)
			// 默认值填充
			if(this.obj.formContent){
				this.form = JSON.parse((this.obj.formContent))
				this.tableLength = this.form.tableLength
			}else if (this.obj.lastMaintenance) {
			  var lastMaintenance = JSON.parse(this.obj.lastMaintenance.formContent)
			  this.form.key1 = lastMaintenance.key1
			  this.form.key2 = lastMaintenance.key2
			}
			
			if(this.obj.filePath){
				this.imgList =  JSON.parse((this.obj.filePath))
			}
		},
		onShow(){
			// console.log(this.form)
		},
		methods: {			
			handleAdd(){
				if(this.tableLength < this.tableLengthMax){
					this.tableLength++
				}
			},
			blur1(num){
			      if ((this.form['key'+num] != '') && (this.form['key'+(num-1)] != '')) {
			        this.form['key' + (num + 1)] = (parseInt(this.form['key' + num]) + parseInt(this.form['key' + (num - 1)]))/2
			        if(this.form['key' + (num - 2)] != '') {
			          this.form['key' + (num + 2)] = ((parseInt(this.form['key' + (num - 2)])) - (parseInt(this.form['key' + (num + 1)]))) / (parseInt(this.form['key' + (num + 1)])) * 100 + "%"
			        }
			      }
			    },
			handleSub(){
				if(this.tableLength > this.tableLengthMin){
					this.tableLength--
				}
			},
			dateChange(res,type){
				console.log(res.key,type)
				// this.form[type] = res.key
				this.$set(this.form,type,res.key)
			},
			getFormData(){
				this.form.tableLength = this.tableLength
				return {
					formContent: JSON.stringify(this.form),
					filePath: JSON.stringify(this.$refs.imgUpload ? this.$refs.imgUpload.getPaths() : []),
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}

</style>
